<template>
  <content-field>
    <n-grid cols="10" item-responsive responsive="screen">
      <n-gi span="10 m:6" offset="0 m:2">
        <essay-card :essay="essay" :type="'edit'"></essay-card>
      </n-gi>
    </n-grid>
  </content-field>
</template>

<script>
import EssayCard from "@/components/cards/EssayCard.vue";
import { ref } from "@vue/reactivity";
import ContentField from "@/components/ContentField.vue";
import remoteData from "@/composables/RemoteData";
import routerJump from "@/composables/RouterJump";

export default {
  components: { EssayCard, ContentField },
  props: {
    id: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    let essay = ref({});
    const { get_essay_details } = remoteData();
    const { go_404 } = routerJump();

    get_essay_details(essay, props.id).catch(() => {
      go_404();
    });

    return {
      essay,
      get_essay_details,
      go_404,
    };
  },
};
</script>

<style scoped>
</style>